$(document).ready(function() {  
    
    $(".draggable_user").draggable({
                                start: function(event, ui) {
                                    //alert(ui.helper.attr("id"));
                                }, 
                                helper:"clone"
                            });
    $(".draggable_admin").draggable({
                                start: function(event, ui) {
                                    //alert(ui.helper.attr("id"));
                                }, 
                                helper:"clone"
                            });
   
    $(".droppable_user").droppable({
                    accept: ".draggable_admin",
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    drop: function( event, ui ) {
                        ajax(ui.helper.attr("id"), "user");
                        //$( this ).addClass( "ui-state-highlight" );
                    }
		});
    $(".droppable_admin").droppable({
                    accept: ".draggable_user",
                    activeClass: "ui-state-hover",
                    hoverClass: "ui-state-active",
                    drop: function( event, ui ) {
                        //$( this ).addClass( "ui-state-highlight" );
                        ajax(ui.helper.attr("id"), "admin");
                    }
		});
     
    //select all the a tag with name equal to modal
    $('a[name=modal]').click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');
         
        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
     
        //transition effect
        $(id).fadeIn(2000); 
    });
     
    //if close button is clicked
    $('.modal_popup .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .modal_popup').hide();
    });     
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.modal_popup').hide();
    });   
});

function ajax(user, type){
    
    var data = "nav=changer_admins&user="+user+"&type="+type;
    $.ajax({
        type: 'POST',
        url: 'admin_order.behind.php',
        data: data,
        async: false,
        success: function(data) {
            var donnee = eval('('+ data +')');
            if(donnee == "insertionOk"){
                if(type=="admin"){
                    
                    var oldElem = $("#"+user);
                    
                    var madiv = oldElem.clone(true);//$("<div></div>");
                    
                    madiv.id=oldElem.id;
                    oldElem.id = user+"_old";
                    oldElem.attr("style","display:none");
                    
                    madiv.attr("class", "div_user draggable_admin");
                    madiv.attr("style","display:block");
                    //madiv.append(oldElem.clone(true));//innerHTML = oldElem.innerHTML;
                    
                    $("#conteneur_admin").append(madiv);
                }
            }
            else if(donnee == "suppressionOk"){
                if(type=="user"){
                    
                    /*
                    var oldElem = document.getElementById(user).style.display = "none";
                    
                    var madiv = document.createElement('DIV');
                    
                    madiv.id=oldElem.id;
                    oldElem.id = user+"_old";
                    
                    madiv.setAttribute("class", "div_user draggable_user");
                    madiv.innerHTML = oldElem.innerHTML;
                    
                    document.getElementById("conteneur_user").appendChild(madiv);
                     */
                    
                    //var oldElem = document.getElementById(user).style.display = "none";
                    var oldElem = $("#"+user);
                    
                    var madiv = oldElem.clone(true);//$("<div></div>");
                    
                    madiv.id=oldElem.id;
                    oldElem.id = user+"_old";
                    oldElem.attr("style","display:none");
                    
                    madiv.attr("class", "div_user draggable_user");
                    madiv.attr("style","display:block");
                    //madiv.append(oldElem.clone(true));//innerHTML = oldElem.innerHTML;
                    
                    $("#conteneur_user").append(madiv);
                }
            }
        }
    });
}
 